<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/shoptrolley.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <script src="../js/shoptrolley.js" type="module"></script>
</head>

<body>
    <!-- header start -->
    <div id="header">
        <!-- 导航 -->
        <div class="header-fir">
            <div class="wrapper-inner">
                <div class="fir-left">
                    <span class="user-now">
                        <a href="#">
                            lisi
                            <div class="shopping-user">
                                <div class="user-msg clearfloat">
                                    <div class="user-img">
                                        <span>
                                            
                                        </span>
                </div>
                <div class="msg-detail">
                    <div class="account-manage clearfloat">
                        <span>账号管理</span>
                        <span>退出</span>
                    </div>
                    <p>
                        淘气值:787
                    </p>
                    <p>
                        普通会员
                    </p>
                </div>
            </div>
            <div class="more-private">
                查看你的专属权益
            </div>
        </div>
        </a>
        <i class="iconfont shopping-pull">&#xe7c3;</i>
        </span>
        <span class="phone-tb">
                        <a href="#">手机逛淘宝</a>
                    </span>
    </div>
    <div class="fir-right">
        <ul>
            <li>
                <a href="./index.html">淘宝网首页</a>
            </li>
            <li>
                <a href="#">我的淘宝</a>
                <i class="iconfont shopping-pull">&#xe7c3;</i>
                <div class="mygoods">
                    <a href="#">已买到的宝贝</a><br>
                    <a href="#">已卖出的宝贝</a>
                </div>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe77c;</i> 购物车
                    <span>62</span>
                </a>
                <i class="iconfont shopping-pull">&#xe7c3;</i>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe6f6;</i> 收藏夹
                </a>
                <div class="mygoods">
                    <a href="#">收藏的宝贝</a><br>
                    <a href="#">收藏的店铺</a>
                </div>
                <i class="iconfont shopping-pull">&#xe7c3;</i>
            </li>
            <li>
                <a href="">
                               商品分类
                            </a>
            </li>
            <li>
                <a href="">免费开店</a>
            </li>
            <li>
                <a href="#">
                    千牛卖家中心
                    
                </a>
                <i class="iconfont shopping-pull">&#xe7c3;</i>
                <div class="sale-center">
                    <a href="#">免费开店</a>
                    <a href="#">已卖出的宝贝</a>
                    <a href="#">出售中的宝贝</a>
                    <a href="#">卖家服务市场</a>
                    <a href="#">卖家培训中心</a>
                    <a href="#">体验中心</a>
                    <a href="#">问商友</a>
                </div>
            </li>
            <li>
                <a href="#">联系客服</a>
                <i class="iconfont shopping-pull">&#xe7c3;</i>
                <div class="shopping-conser">
                    <a href="#">消费者客服</a>
                    <a href="#">商家服务大厅</a>
                </div>
            </li>
            <li>
                <a href="">
                    <i class="iconfont">&#xe63f;</i>网站导航
                    <i class="iconfont">&#xe7c3;</i>
                </a>
                <div class="netnavi">
                    <div class="hotcom">
                        <span>热点推荐Hot</span>
                        <ul class="clearfloat">
                            <li><a href="#">天猫超市</a></li>
                            <li><a href="#">喵生鲜</a></li>
                            <li><a href="#">科技新品</a></li>
                            <li><a href="#">女装新品</a></li>
                            <li><a href="#">酷玩街</a></li>
                            <li><a href="#">天猫超市</a></li>
                            <li><a href="#">喵生鲜</a></li>
                            <li><a href="#">科技新品</a></li>
                            <li><a href="#">女装新品</a></li>
                            <li><a href="#">酷玩街</a></li>
                            <li><a href="#">天猫超市</a></li>
                            <li><a href="#">喵生鲜</a></li>
                            <li><a href="#">科技新品</a></li>
                            <li><a href="#">女装新品</a></li>
                            <li><a href="#">酷玩街</a></li>
                        </ul>
                    </div>
                    <div class="market">
                        <span>行业市场Market</span>
                        <ul class="clearfloat">
                            <li><a href="#">美妆</a></li>
                            <li><a href="#">电器</a></li>
                            <li><a href="#">女装</a></li>
                            <li><a href="#">男装</a></li>
                            <li><a href="#">女鞋</a></li>
                            <li><a href="#">男鞋</a></li>
                            <li><a href="#">内衣</a></li>
                            <li><a href="#">箱包</a></li>
                            <li><a href="#">运动</a></li>
                            <li><a href="#">母婴</a></li>
                            <li><a href="#">家装</a></li>
                            <li><a href="#">医药</a></li>
                            <li><a href="#">食品</a></li>
                            <li><a href="#">配饰</a></li>
                            <li><a href="#">汽车</a></li>
                        </ul>
                    </div>
                    <div class="help">
                        <span>服务指南Help</span>
                        <ul class="clearfloat">
                            <li><a href="#">帮助中心</a></li>
                            <li><a href="#">品质保障</a></li>
                            <li><a href="#">特色服务</a></li>
                            <li><a href="#">7天退货</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    </div>
    </div>
    <!-- 搜索 -->
    <div class="header-search clearfloat">
        <div class="wrapper-inner">
            <a href="#">
                <img src="../img/shopping-logo.png" alt="">
            </a>
            <form action="#">
                <div class="searchinput">
                    <select name="" id="">
                            <option value="" selected=selected>宝贝</option>
                            <option value="">天猫</option>
                            <option value="">店铺</option>
                        </select>
                    <input type="text" name="usersearch" id="usersearch">
                    <i class="iconfont search-icon">&#xe6ca;</i>
                    <button type="submit">搜&nbsp;索</button>
                </div>
            </form>
        </div>
    </div>
    </div>
    <!-- header end -->

    <!-- body start -->
    <div id="body" class="clearfloat">
        <!-- 购物车选项卡 -->
        <div class="wrapper-inner">
            <div id="trolley-now">
                <ul id="trolley-list" class="clearfloat">
                    <li class="active trolley-under"><a href="#">全部商品</a></li>
                    <li><a href="#">降价商品</a></li>
                    <li><a href="#">库存紧张</a></li>
                </ul>

                <div class="show all-goods">
                    <!-- 全选行 -->
                    <div class="choose-row">
                        <span class="choose-all">
                        <input type="checkbox" class="checkbox-btn check-all-trolley">
                        &nbsp;&nbsp;全选
                    </span>
                        <span class="goods-introd">商品信息</span>
                        <span class="sin-price">单价</span>
                        <span class="goods-numbers">数量</span>
                        <span class="one-price">金额</span>
                        <span class="choose-opera">操作</span>
                    </div>
                    <!-- 店铺名 -->
                    <div class="store-row">
                        <span class="store-all">
                        <input type="checkbox" class="checkbox-btn store-check-all">
                        &nbsp;&nbsp;
                        <span class="store-logo"></span> &nbsp;&nbsp;店铺：
                        <a href="#">天猫国际进口超市</a>
                        <span class="store-service"><a href="#"></a></span>
                        </span>
                    </div>
                    <!-- 购物车商品 -->
                    <div class="trolley-products">
                        <!-- 店铺优惠 -->
                        <div class="store-discount">
                            <span>凑满88元享超值换购</span>
                            <span>满88</span>
                            <i></i>
                        </div>
                        <!-- 商品 -->
                        <ul class="trolley-detail">
                        </ul>
                    </div>
                </div>
                <div class="sale-goods">内容二</div>
                <div class="lose-goods">内容三</div>

            </div>
            <div class="selected-total">
                <span>已选商品（不含运费）</span>
                <span class="total-price">22.00</span>
                <span class="settle-acc">
                <a href="#">结算</a>
            </span>
            </div>
        </div>
        <!-- 结算 -->
        <div id="calculate-bar">
            <div class="cal-left">
                <span class="check-all-btn">
                <input type="checkbox" class="checkbox-btn check-all-trolley">
                全选
                </span>
                <span class="delete-choosen">
                <a href="#">删除</a>
                </span>
                <span class="clear-all-invalid">
                    <a href="#">清除失效宝贝</a>
                </span>
                <span class="remove-in-collect">
                    <a href="#">
                        移入收藏夹
                    </a>
                </span>
                <span class="goods-share">
                    <a href="#">分享</a>
                </span>
            </div>
            <div class="cal-right">
                <span class="choosen-goods-num">
                    已选商品
                    <span class="choosen-num">0</span> 件
                <i class="iconfont">&#xe7c1;</i>
                </span>
                <span class="cal-sum-price">
                    合计（不含运费）：
                    <span class="price-sum">
                        0.00
                    </span>
                </span>
                <span class="buy-goods-btn">
                    <a href="#">结算</a>
                </span>
            </div>
        </div>
    </div>
    <!-- body end -->

    <!-- footer start -->
    <div id="footer">
        <div class="commsg">
            <div class="wrapper-inner">
                <div class="tianmaocom">
                    <ul class="clearfloat">
                        <li>
                            <a href="#">关于天猫</a>
                        </li>
                        <li>
                            <a href="#">商家服务大厅</a>
                        </li>
                        <li>
                            <a href="#">开放平台</a>
                        </li>
                        <li>
                            <a href="#">诚聘英才</a>
                        </li>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                        <li>
                            <a href="#">网站合作</a>
                        </li>
                        <li>
                            <a href="#">法律声明</a>
                        </li>
                        <li>
                            <a href="#">隐私权政策</a>
                        </li>
                        <li>
                            <a href="#">知识产权</a>
                        </li>
                        <li>
                            <a href="#">廉政举报</a>
                        </li>
                        <li>
                            <a href="#">规则意见征集</a>
                        </li>
                    </ul>
                </div>
                <div class="alicom">
                    <ul class="clearfloat">
                        <li><a href="#">阿里巴巴集团 |</a></li>
                        <li><a href="#">淘宝网 |</a></li>
                        <li><a href="#">天猫</a></li>
                        <li><a href="#">聚划算 |</a></li>
                        <li><a href="#">全球速卖通 |</a></li>
                        <li><a href="#">阿里巴巴国际交易市场 |</a></li>
                        <li><a href="#">1688 |</a></li>
                        <li><a href="#">阿里妈妈 |</a></li>
                        <li><a href="#">飞猪</a></li>
                        <li><a href="#">阿里云计算 |</a></li>
                        <li><a href="#">AliOS</a></li>
                        <li><a href="#">阿里通信 |</a></li>
                        <li><a href="#">万网 |</a></li>
                        <li><a href="#">高德 |</a></li>
                        <li><a href="#">UC |</a></li>
                        <li><a href="#">友盟 |</a></li>
                        <li><a href="#">虾米 |</a></li>
                        <li><a href="#">钉钉 |</a></li>
                        <li><a href="#">支付宝 |</a></li>
                        <li><a href="#">阿里安全</a></li>
                    </ul>
                </div>
                <div class="lawmsg">
                    <div class="lawregi">
                        <span><a href="#">增值电信业务经营许可证：浙B2-20110446</a></span>
                        <span>市场名称登记证：工商网市字3301004119号</span>
                        <span>出版物网络交易平台服务经营备案证：新出发浙备字第2019002号</span>
                    </div>
                    <div class="lawinternet">
                        <span>互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</span>
                        <span>互联网药品信息服务资质证书编号：<a href="#">浙-（经营性）-2017-0005</a></span>
                        <span><a href="#">
                            <img src="../img/footer-zjpolice.png" alt="">
                            浙公网安备 33010002000120号</a></span>
                    </div>
                    <div class="lawmedi">
                        <span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</span>
                    </div>
                    <div class="lawfood">
                        <span>浙江省网络视频销售第三方平台提供者备案：浙网食A33010002</span>
                        <span><a href="#">12318举报</a></span>
                        <span><a href="#">浙B2-20110446-1</a></span>
                    </div>
                    <div class="tmcopyright">
                        &copy;2003-2020TMALL.COM版权所有
                    </div>

                </div>
            </div>
        </div>

    </div>
    <!-- footer end -->


</body>

</html>